<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    #whole {
        display: flex;
    }
    #outer {
        width: 100px;
        height: 100vh;
        background-color: #bbffaa;
    }
    #outer .router {
        width: 100%;
        height: 80px;
        line-height: 80px;
        /*background-color: red;*/
        text-align: center;
        border-bottom: black solid 1px;
    }
</style>
<body>
<script type="text/javascript">
/*
总结步骤：

1. 添加hashchange和load的eventListener  执行refresh函数
2. refresh函数的作用是获取路径(#后的) 然后调用里面的回调函数
3. 当点击路由时，路径变化触发监听器事件，监听器事件触发refresh函数，refresh函数触发此路径绑定的回调函数，切换显示
 */
    function Router(){
        this.routes={}
        this.curUrl=''

        //添加回调函数
        this.route=function(path,callback){
            this.routes[path]=callback||function(){}
        }
        //执行回调函数
        this.refresh=function(){
            //获取url  location.hash获取#及其后面的东西 slice(1)即把#去掉
            this.curUrl=location.hash.slice(1)||'/'
            // 调用已经添加的回调函数
            this.routes[this.curUrl]()
        }
        //监听load和hashchange
        this.init=function(){
            // 绑定load 实现用户重新刷新时，路径没变 但会显示默认内容(即不会显示当前路径该有的内容)
            //? 参数：事件名、处理函数以及一个可选的布尔值，用于指定事件是否在捕获阶段进行处理
            window.addEventListener('load',this.refresh.bind(this),false)
            window.addEventListener('hashchange',this.refresh.bind(this),false)
        }
    }

    let R=new Router()
    //触发监听
    R.init()
    // 添加路由切换时的回调函数
    R.route('/one',function(){
        document.getElementById("main").innerHTML= 'one'
    })
    R.route('/two',function(){
        document.getElementById("main").innerHTML= 'two'
    })
</script>
<div id="whole">
    <div id="outer">
        <div class="router"><span><a href="#/one">路由1</a></span></div>
        <div class="router"><span><a href="#/two">路由2</a></span></div>
    </div>
    <div id="main">欢迎</div>
</div>
</body>
</html>
